<template>
	<view class="containner">
		<view class="headerData">
			<view>
				<view class="earningTitle">收益余额(元)</view>
				<view class="earning">{{income}}</view>
			</view>
			<view class="btns" @click="goWithdraw">提现</view>
		</view>
		<view class="tabs">
			<u-tabs :list="list" active-color="#2AC092" :is-scroll="false" v-model="current" @change="change"></u-tabs>
		</view>
		<view class="listdata">
			<view class="listdataTitle">{{listdataTitle}}</view>
			<view class="list">
				<view class="">
					<view class="item" v-for="(item,index) in datalist" :key="index">
						<view>
							<view class="source">{{item.title}}</view>
							<view class="timer">{{item.updated_at}}</view>
						</view>
						<view v-if="current == 0" class="point">{{item.income}}</view>
						<view v-if="current == 1" class="money">
							<view class="subtract">-{{item.amount}}</view>
							<view v-if="audit_status == 0" class="withDrawStatus">{{'申请中'}}</view>
							<!-- <view v-if="audit_status == 1" class="withDrawStatus">{{'提现成功'}}</view> -->
							<view v-if="audit_status == 1" class="withDrawStatus">{{'待打款'}}</view>
							<view v-if="audit_status == -1" class="withDrawStatus errorStatus">{{'提现失败'}}</view>
						</view>
					</view>
					<view class="errorReason">{{item.reason_rejection}}</view>
				</view>
				<u-loadmore :status="status" />
			</view>
		</view>
	</view>
</template>
<script>
	import { getIncomelist,getWithdrawlist,getUserInfo } from '@/api/user.js'
	export default {
		data() {
			return {
				list: [{
					name: '收益记录'
				}, {
					name: '提现记录'
				}],
				current: 0,
				listdataTitle: '收益记录',
				page: 1,
				status: 'loadmore',
				income:'',
				datalist:[]
			}
		},
		mounted() {
			this.getIncomelist()
			this.getUserInfo()
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				if(current == 0){
					this.getIncomelist()
				}
				if(current == 0){
					this.getWithdrawlist()
				}
			}, 2000)
		},
		methods: {
			change(index) {
				this.page = 1
				this.datalist = []
				if (index == 0) {
					this.listdataTitle = '收益记录'
					this.getIncomelist()
				}
				if (index == 1) {
					this.listdataTitle = '提现记录'
					this.getWithdrawlist()
				}
			},
			getUserInfo(){
				let that = this
				getUserInfo().then(res=>{
					that.income = res.data.data.income
				})
			},
			// 收益记录
			getIncomelist(){
				let that = this
				getIncomelist({page:this.page}).then(res=>{
					let list = res.data.list;
					if(list.length < 10){
						that.status = 'nomore';
					}
					if(list.length != 0){
						list.map(item=>{
							that.datalist.push(item)
						})
					}
				})
			},
			// 提现记录
			getWithdrawlist(){
				let that = this
				getWithdrawlist({page:this.page}).then(res=>{
					let list = res.data.list;
					if(list.length < 10){
						that.status = 'nomore';
					}
					if(list.length != 0){
						list.map(item=>{
							that.datalist.push(item)
						})
					}
				})
			},
			// 
			goWithdraw() {
				uni.navigateTo({
					url: '/pagesA/withdraw/withdraw'
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.containner {
		background-color: #f2f2f2;
		min-height: 100vh;
		padding: 20upx;

		.headerData,
		.tabs,
		.listdata {
			background: #FFFFFF;
			border-radius: 10upx;
			overflow: hidden;
		}

		.headerData {
			height: 180upx;
			padding: 0 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.earningTitle {
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}

			.earning {
				font-size: 60upx;
				font-family: Arial;
				font-weight: bold;
				color: #2AC092;
				line-height: 48upx;
				margin-top: 27upx;
			}

			.btns {
				width: 128upx;
				height: 64upx;
				line-height: 64upx;
				text-align: center;
				color: #fff;
				background: #2AC092;
				border-radius: 10upx;
				font-size: 28upx
			}
		}

		.tabs {
			height: 120upx;
			margin-top: 20upx;
			align-items: center;
		}

		.listdata {
			margin-top: 20upx;
			padding: 0 25upx;

			.listdataTitle {
				font-size: 30upx;
				padding: 25upx 0;
				color: #999;
				border-bottom: 2upx solid #F5F5F5;
			}
			.item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2upx solid #F5F5F5;
				padding: 25upx 0;
			}
		}
	}
	.listdata{
		.source{
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			line-height: 18upx;
		}
		.timer{
			margin-top: 22upx;
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			line-height: 18upx;
		}
		.point{
			font-size: 30upx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #2AC092;
			line-height: 18upx;
		}
		.subtract{
			font-size: 30upx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #333333;
			line-height: 18upx;
		}
		.withDrawStatus{
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-top: 18upx;
			// line-height: 48upx;
		}
		.errorStatus{
			font-size: 24px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF6D6A;
		}
		.errorReason{
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF6D6A;
			padding: 20upx 0;
		}
	}
</style>